<template>
    <div class="">
        <h2 class="fonts18 fontw700">职位名称:{{ props.data.positionName }}</h2>
        <ul class="detail_aside_main_ul">
            <li class="detail_aside_main_li" v-for="(item, index) in props.data.logs" :key="index">
                <div class="detail_aside_main_li_t" v-if="item.logSpec==1"></div>
                <div class=" aie" v-if="item.logSpec == 1">
                    <p class="detail_aside_main_li_title fonts16 fontw500">{{ item.logName }} </p>
                    <p class=" fonts12 gray magint10" >操作人：{{ item.createByUserNickName }}</p>
                    <span class=" fonts12 gray magint10">操作时间：{{ item.createTime }}</span>
                </div>
                <div class="aie" v-if="item.status > 0 && item.logSpec == 2">
                    <p class="blue fonts14  ">{{ item.logName }}</p>
                    <p class=" fonts12 gray magint10">操作人：{{ item.createByUserNickName }}</p>
                    <span class=" fonts12 gray magint10">操作时间：{{ item.createTime }}</span>
                </div>
                <div class=" aie" v-if="item.status < 0 && item.logSpec == 2">
                    <p class="red fonts14 magint10">{{ item.logName }}</p>
                    <span class=" fonts12 gray magint10">{{ item.createTime }}</span>
                </div>
                <div class="aie" v-if="item.logSpec == 3">
                    <p class="fonts14 gray magint10 " v-if="item.content">反馈内容：{{ item.content }}</p>
                    <span class=" fonts12 gray magint10">反馈时间：{{ item.createTime }}</span>
                </div>
                <div class="flex aie" v-if="item.logSpec != 3">
                    <p class="fonts14 gray magint10 " style="white-space: pre-wrap;" v-if="item.content">{{ item.content }}</p>
                </div>
            </li>
            <!-- <li class="detail_aside_main_li" >
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【HR初筛】 </p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">初筛通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="red fonts14 magint10">初筛未通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">反馈内容：不符合</p>
                </div>
            </li>
            <li class="detail_aside_main_li">
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【应聘部门筛选】 </p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">应聘部门筛选通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="red fonts14 magint10">应聘部门筛选未通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">反馈内容：不符合</p>
                </div>
            </li>
            <li class="detail_aside_main_li">
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【笔试】 </p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">笔试通知</p>
                    <span class="maginl9 fonts12 gray">2023/09/01 10:00</span>
                </div>
                <div class="flex aie">
                    <span class="fonts12 gray">笔试时间：2023/09/01 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">笔试通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="red fonts14 magint10">笔试未通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">笔试成绩：80分</p>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">反馈内容：不符合</p>
                </div>
            </li>
            <li class="detail_aside_main_li">
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【待约面试】</p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">面试邀约</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">
                        面试轮次：一轮面试 <br/>
                        面试方式：现场面试<br/> 
                        面试时间：2023/09/01 10:00 <br/>
                        面试地址：成都市新都区xx号 <br/>
                        备注：请携带简历
                    </p>
                </div>
            </li>
            <li class="detail_aside_main_li">
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【面试中】</p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">面试通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="red fonts14 magint10">面试未通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">反馈内容：不符合</p>
                </div>
            </li>
            <li class="detail_aside_main_li">
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【体检审查】</p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">背景调查通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="red fonts14 magint10">背景调查未通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">体检通知</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="maginl9 fonts12 gray">
                        体检报告上传截止时间：2023/09/01 10:00 <br/>
                        备注：需要检查xxx项目
                    </p>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">体检审查通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="red fonts14 magint10">体检审查未通过</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">录用通知</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">
                        入职时间：2023/09/01 10:00 <br/>
                        入职地址：成都市新都区xx号 <br/>
                        备注：请携带证件</p>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">录用公示</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="fonts14 gray magint10">反馈内容：不符合</p>
                </div>
            </li>
            <li class="detail_aside_main_li">
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【待入职】</p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
                <div class="flex aie">
                    <p class="blue fonts14 magint10">确认入职</p>
                    <span class="maginl9 fonts12 gray">2023/08/30 10:00</span>
                </div>
            </li>
            <li class="detail_aside_main_li">
                <div class="detail_aside_main_li_t"></div>
                <div class="flex aie">
                    <p class="detail_aside_main_li_title fonts16 fontw500">【入职完成】</p>
                    <span class="maginl9 fonts12">2023/08/30 10:00</span>
                </div>
            </li> -->
        </ul>
    </div>
</template>

<script lang="ts" setup>
const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return []
        }
    }
})
console.log("应聘轨迹图--------------------------",props.data);

const statusFun = (item) => {
    let arr = [
        {
            id: "1",
            label: "初筛"
        }, {
            id: "2",
            label: "应聘部门筛选"
        }, {
            id: "3",
            label: "笔试"
        }, {
            id: "4",
            label: "面试"
        }, {
            id: "5",
            label: "体检审查"
        }, {
            id: "6",
            label: "体检审查"
        }, {
            id: "7",
            label: "体检审查"
        }, {
            id: "8",
            label: "待入职"
        }, {
            id: "9",
            label: "完成入职"
        }
    ]
    let string = ""
    arr.forEach(element => {
        if (item == element.id) {
            string = element.label
        }
    })
    if (!string) {
        string = "人才库"
    }
    return string

}
</script>

<style lang="less" scoped>
.blue {
    color: #2F6CBC;
}

.red {
    color: #FE6470;
}

.gray {
    color: #979797;
}

.magint10 {
    margin-top: 10px;
}

.maginl9 {
    margin-left: 9px;
    // margin-top: 10px;
}

h2 {
    position: relative;
    margin: 0;
    margin-bottom: 16px;

    // padding:24px 24px 0px 24px;
    &::after {
        position: absolute;
        left: -24px;
        top: 4px;
        content: "";
        width: 4px;
        height: 16px;
        background: #2F6CBC;
        border-radius: 0px 4px 4px 0px;
        opacity: 1;
    }
}

.detail_aside_main_ul {
    padding-left: 24px;
    list-style: none;

    .detail_aside_main_li {
        // margin-bottom: 26px;
        padding: 14px 12px;
        // background: #F4F4F4;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        position: relative;

        .detail_aside_main_li_t {
            left: -32px;
            position: absolute;
            content: "";
            top: 15px;
            width: 16px;
            height: 16px;
            opacity: 1;
            border: 1px solid #2F6CBC;
            border-radius: 50%;

            &::after {
                content: "";
                top: 4px;
                left: 4px;
                position: absolute;
                width: 8px;
                height: 8px;
                background: #2F6CBC;
                opacity: 1;
                border-radius: 50%;

            }
        }
        

        &:last-child {

            // margin-left: 24px;
            &::before {
                display: none;
            }
        }

        &::before {
            position: absolute;
            content: "";
            top: 7.5px;
            height: calc(100% + 22px);
            left: -24px;
            top: 32px;
            opacity: 1;
            border: 1px dashed #EAE8F2;

        }

        .detail_aside_main_li_title {}
    }
}
</style>